// 1. Vue.use()接受一个参数，可以是对象，也可以是函数，如果是对象，该对象内必须具备install方法
// 2. use会将vue实例作为参数传递给install函数，且调用install函数
// 3. install方法被同一个插件多次调用时，插件也只会安装一次
let Vue = null
class HistoryRoute {
  constructor() {
    this.current = null
  }
}

class VueRouter {
  constructor(options) {
    this.mode = options.mode || 'hash'
    this.routes = options.routes || []
    this.routesMap = this.createMap(this.routes) // 把数组变成对象
    this.history = new HistoryRoute() //当前的页面路径 { current: null }
    this.init()
  }

  createMap(routes) {
    return routes.reduce((pre, current) => {
      pre[current.path] = current.component
      return pre
    }, {}) // { '/': Home, '/about': About }
  }

  init() {
    if (this.mode === 'hash') {
      location.hash ? '' : location.hash = '/'
      // 页面初次刷新时触发
      window.addEventListener('load', () => {
        this.history.current = location.hash.slice(1)
      })
      // 页面路径发生改变时触发
      window.addEventListener('hashchange', () => {
        this.history.current = location.hash.slice(1) // 放弃# 只需要 /home
      })
    } else {
      location.pathname ? '' : location.pathname = '/'
      window.addEventListener('load', () => {
        this.history.current = location.pathname
      })
      window.addEventListener('popstate', () => {
        this.history.current = location.pathname
      })
    }
  }
}

VueRouter.install = function(v) {
  Vue = v
  // console.log(Vue);
  Vue.mixin({ // 混入代码
    beforeCreate() { // vue初始化好了的时候
      // 如何把router分发给所有的组件使用
      if (this.$options && this.$options.router) { // vue.$options是用来获取页面根组件的
        this._root = this // 把当前的实例挂载到_root
        this._router = this.$options.router
        Vue.util.defineReactive(this, 'xxx', this._router.history)
      } else {
        // 代码运行到了子组件内部,从父组件里面获取router实例
        this._root = this.$parent && this.$parent._root
      }
      Object.defineProperty(this, '$router', {
        get() {
          return this._root._router // 直接拿到了全局根组件上的router
        }
      })
      Object.defineProperty(this, '$route', {
        get() {
          return this._root._router.history.current
        }
      })
    }
  })


  Vue.component('router-link', { // 注册路由中的router-link
    props: {
      to: String
    },
    render(h) {
      let mode = this._root._router.mode
      let to = mode === 'hash' ? '#'+this.to : this.to
      return h('a', {attrs: {href: to}}, this.$slots.default) // this.$slots.default取组件里面的内容（Home）
    }
  })
  Vue.component('router-view', { // 注册路由中的router-view
    render(h) {
      let current = this._root._router.history.current
      let routeMap = this._root._router.routesMap
      return h(routeMap[current])
    }
  })
}

export default VueRouter


// $router > $route

// let obj = {
//   name: obj
// }

// 父beforeCreate -> 
// 父created -> 
// 父beforeMounte ->  父组件的template模版开始编译
// 子beforeCreate -> 
// 子created -> 
// 子beforeMounte -> 
// 子mounted ->
// 父mounted  --- 父组件的template模版编译完成



